<template>
  <div>
    <div class="gz-content">
      <div class="screen-box" v-if="this.dialog.objName == 'org_group'">
        <div class="search-input">
          <group style="margin: 0">
            <x-input
              title="title"
              v-model="queryParams.name"
              placeholder="请输入网点名称进行查询"
              style="text-align: left"
              :readonly="initSearch"
              :debounce="500"
              @on-change="searchKey"
            >
              <template slot="label">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <x-icon
                    type="ios-search-strong"
                    size="20"
                    style="margin-right: 10px; color: #979797"
                  ></x-icon>
                </div>
              </template>
            </x-input>
          </group>
        </div>
      </div>
      <ab-scroller
        :url="url"
        :list="rows"
        :pageSize="dialog.pageSize"
        :height="geiScrollViewHeight"
        :params="params"
        ref="scroller"
        :conditions="conditions"
        :top="this.dialog.objName == 'org_group' ? 68 : 0"
      >
        <div class="org-list">
          <div
            class="org-item"
            v-for="row in rows"
            :class="row.checked ? 'active-item' : ''"
            v-on:click="check(row)"
          >
            <span v-for="field in dialog.displayFields">{{
              row[field.columnName] ? row[field.columnName] : "-"
            }}</span>
          </div>
        </div>

        <!-- <x-table :cell-bordered="true"  style="background-color:#fff;">
		<thead style="background-color: #F7F7F7">
			<tr>
				<th></th>
				<th v-for="field in dialog.displayFields">
					{{field.showName}}
				</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="row in rows" v-on:click="check(row)">
				<td><input type="checkbox" v-model="row.checked"> </td>
				<td v-for="field in dialog.displayFields">{{row[field.columnName]?row[field.columnName]:"-"}}</td>
			</tr>
		</tbody>
		</x-table> -->
      </ab-scroller>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { XTable } from "vux";
Vue.component("x-table", XTable);
import { LoadMore } from "vux";
Vue.component("loadMore", LoadMore);
import { XButton } from "vux";
Vue.component("x-button", XButton);

export default {
  name: "abCustDialogShowList",
  props: ["dialog", "initData", "param", "initParam"], //dialog:列表对话框
  data: function () {
    return {
      listData: [], //列表数据
      url: "", //获取数据的url地址
      rows: [],
      conditions: [],
      params: [],
      paramsStr: "{}",
      queryParams: {
        name: "",
      },
      initSearch: true,
    };
  },
  computed: {
    geiScrollViewHeight() {
      let that = this
      this.$nextTick(() => {
        const pageHeight = window.innerHeight;
        let marginHeight = 46 + 60;
        if (that.dialog.objName == "org_group") {
          marginHeight += 68;
        }
        return String(pageHeight - marginHeight);
      });
    },
  },
  created: function () {
    if (this.dialog) {
      this.url = "/form/formCustDialog/listData_" + this.dialog.key;
    }
    //拼装查询条件
    var that = this;
    setTimeout(() => {
      that.initSearch = false;
    }, 1000);
    this.dialog.conditionFields.forEach(function (field) {
      if (field.valueSource != "param" || !field.value.ctrlType) {
        return;
      }
      var json = {};
      json.key = that.getId(field);
      json.value = field.showName;
      that.conditions.push(json);
    });
    if (!this.param) return;
    if (this.initParam) {
      for (let key in this.initParam) {
        if (!this.param[key]) {
          this.$set(this.param, key, this.initParam[key]);
        }
      }
    }

    this.paramsStr = JSON.stringify(this.param);
    this.params = {};
    var ts = this;
    for (var key in this.param) {
      if (this.param[key]) {
        ts.dialog.conditionFields.forEach(function (el) {
          var str = key + "$";
          if (key === el.columnName) {
            if (el.dbType === "varchar") {
              str += "V";
            }
            if (el.dbType === "number") {
              str += "N";
            }
            if (el.dbType === "date") {
              str += "D";
            }
            ts.params[str + el.condition] = ts.param[key];
          }
        });
      }
    }
  },
  methods: {
    check: function (row) {
      //单选
      if (!this.dialog.multiple) {
        this.rows.forEach(function (item) {
          Vue.set(item, "checked", false);
        });
      }
      Vue.set(row, "checked", !row.checked);
    },
    rowStyle: function (row) {
      if (row.checked) {
        return {
          backgroundColor: "#F7F7F7",
        };
      }
      return {};
    },
    //获取选中的结果
    getData: function () {
      var data = [];
      var that = this;
      this.rows.forEach(function (row) {
        if (!row.checked) {
          return;
        }
        var json = {};
        that.dialog.returnFields.forEach(function (field) {
          json[field.returnName] = row[field.columnName];
        });
        data.push(json);
      });
      return data;
    },
    /**
     * 判断两个json是否相等 ps：只比较只b中存在的字段
     */
    jsonEqual: function (a, b) {
      if (a === b) {
        return true;
      }
      var allEq = true; //全相等
      var hasOneEq = false; // 有一个字段相等
      for (var key in b) {
        if (a[key] && b[key] && b[key] !== a[key]) {
          allEq = false;
          break;
        }
        if (a[key] && b[key] && b[key] === a[key]) {
          hasOneEq = true;
        }
      }
      return allEq && hasOneEq;
    },
    //获取查询字段的id
    getId: function (field) {
      var id = field.columnName + "^";
      if (field.dbType === "varchar") {
        id += "V";
      }
      if (field.dbType === "number") {
        id += "N";
      }
      if (field.dbType === "date") {
        id += "D";
      }
      id += field.condition;
      return id;
    },

    searchKey(val) {
      if (!val) {
        this.rows = this.$refs.scroller.rows;
        return;
      }
      let arr = this.rows;
      let newArr = [];
      arr.forEach((v, i) => {
        let name = v.name_;
        if (name.indexOf(val) != -1) {
          newArr.push(v);
        }
      });
      this.rows = newArr;
      // let obj = arr.find(v => {
      //   let name = v.name_
      //   console.log(name.indexOf(val))
      //   if(name.indexOf(val) != -1){
      //     return arr[name.indexOf(val)]
      //   }
      // });
      // this.initSearch = true
      // this.$refs.myscroll.finishInfinite(true);
      // this.taskList = []
      // let searchParam = this.searchParam
      // searchParam.key_ = val
      // this.pageParams = {
      //   searchParam: searchParam,
      //   type: 'taskHandle' + this.active
      // }
      // this.searchParam = searchParam
      // this.getTaskList({
      //   searchParam: searchParam,
      //   type: 'taskHandle' + this.active
      // })
    },
  },
  watch: {
    param: {
      handler: function (newVal) {
        if (!newVal || JSON.stringify(newVal) == this.paramsStr) {
          return;
        }
        this.paramsStr = JSON.stringify(newVal);
        this.params = {};
        if (this.initParam) {
          for (let key in this.initParam) {
            if (!this.param[key]) {
              this.$set(this.param, key, this.initParam[key]);
            }
          }
        }

        for (var key in newVal) {
          if (newVal[key]) {
            this.params[key + "$VEQ"] = newVal[key];
          }
        }
        this.$nextTick(() => {
          this.$refs.scroller.rows.splice(0);
          this.$refs.scroller.search(0, this.$refs.scroller.pageSize);
        });
      },
      deep: true,
    },
    //监听dialog对象
    dialog: function (newVal, oldVal) {
      if (!newVal || newVal === oldVal) {
        return;
      }
      this.url = "/form/formCustDialog/listData_" + newVal.key;
    },
    rows: function (newVal, oldVal) {
      if (!this.initData) {
        return;
      }
      var that = this;
      this.rows.forEach(function (row) {
        that.initData.forEach(function (item) {
          if (item.inited) {
            return;
          }

          //处理返回字段的返回名映射为字段名
          var itemTemp = {};

          for (var key in item) {
            var val = item[key];
            var isMatch = false;
            that.dialog.returnFields.forEach(function (field) {
              if (field.returnName === key) {
                itemTemp[field.columnName] = val;
                isMatch = true;
              }
            });
            if (!isMatch) {
              itemTemp[key] = val;
            }
          }

          if (that.jsonEqual(row, itemTemp)) {
            Vue.set(row, "checked", true);
            item.inited = true; //标记已经初始化过
          }
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../view/taskManagement/publicStyle.less";

/deep/ .weui-cell__bd input {
  text-align: left !important;
}

.search-input {
  margin-right: 0;
}

.org-list {
  padding: 0 12px;
  .org-item {
    padding: 18px 0;
    background-color: #ffffff;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    color: #1d2129;
    margin-top: 12px;
  }
  .active-item {
    background-color: rgba(255, 74, 50, 0.8);
    color: #fff;
  }
}

.ivu-form .weui-cell {
  padding: 10px 15px !important;
}
</style>
